<template>
  <div style="text-align: left">患者信息:
    <span style="font-size: 16px;background-color: beige;color: #42b983">
      姓名:{{ info.realName }}
      病历号:{{ info.caseNumber }}
      年龄:{{ info.age }}
      性别:{{ info.sex }}

    </span>
  </div>

  <hr/>
  <div style="text-align: left;font-weight: bolder">
    开设处方
  </div>
  <hr/>
  <div style="text-align: left;background-color: aquamarine;width: 20%">
    处方金额:{{total}}元
  </div>
  <hr/>

    <el-table
      ref="multipleTableRef"
      :data="prescriptionList"
      style="width: 100%"
      @selection-change="handlePrescriptionChange">

      <el-table-column type="selection" width="55" />
      <el-table-column type="expand">
        <template #default="{row}">
            <span style="margin-left: 10%">药品编码:{{row.drugCode}}</span>
            <span>包装单位:{{row.drugFormat}}</span>
            <span>生产厂家:{{row.manufacturer}}</span>
            <span>药剂类型:{{row.drugDosage}}</span>
            <span>药品类型:{{row.drugType}}</span>

        </template>
      </el-table-column>
      <el-table-column prop="drugName" label="药品名称" />
      <el-table-column prop="drugFormat" label="药品规格"/>
      <el-table-column prop="drugPrice" label="单价" width="100"/>
      <el-table-column label="用法用量" width="350">
        <template #default="{row}">
        <el-input placeholder="请求输入用量，频次信息" style="width: 100%"
                  v-model="row.drugUsage"/>
        </template>
      </el-table-column>
      <el-table-column label="数量">
        <template #default="{row}">
          <el-button @click="add(row)">+</el-button>
          <el-input v-model="row.drugNumber" style="width: 40px"/>
          <el-button @click="sub(row)">-</el-button>
        </template>
      </el-table-column>
      <el-table-column width="250">
        <template #header>
          <el-button type="primary" @click="chooseDrug">添加</el-button>
          <el-button type="success">删除</el-button>
        </template>
      </el-table-column>

    </el-table>
    <hr/>
    <el-button type="primary" @click="savePrescription">保存处方</el-button>
    <el-button type="success" @click="resetPrescription">重置处方</el-button>

  <!--  选择药品的对话框组件-->
  <el-dialog
      v-model="dialogVisible"
      title="选择药品"
      width="60%"
      :before-close="handleClose">
    <el-form :model="formDrug" label-width="auto" style="max-width: 100%">

      <el-form-item label="药品名称">
        <el-input v-model="formDrug.drugName" />
      </el-form-item>
      <el-form-item label="药品辅助码">
        <el-input v-model="formDrug.mnemonicCode" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchDrug">搜索</el-button>

      </el-form-item>
    </el-form>

    <!--  药品列表  -->
    <el-table
        ref="multipleTableRef"
        :data="drugList"
        style="width: 100%"
        @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column prop="drugCode" label="药品编号" width="120"/>
      <el-table-column prop="drugName" label="药品名称" width="120" />
      <el-table-column prop="drugFormat" label="药品规格" />
      <el-table-column prop="drugPrice" label="药品单价" />
      <el-table-column prop="drugUnit"   label="包装单位" />
      <el-table-column prop="manufacturer"   label="药品厂家" />

    </el-table>
    <el-button type="primary" @click="addDrug">添加</el-button>
    <el-button type="success" @click="closeDrug">关闭</el-button>

  </el-dialog>


</template>

<script setup>
//获取患者id
import {onMounted, reactive, ref} from "vue";
import axios from "axios";
import {ElMessage} from "element-plus";
//获得患者病历id
let item = sessionStorage.getItem("idKey");
let id=0;
if(item){
  let jsonItem=JSON.parse(item);
  id=jsonItem.id;
}
//定义患者信息数据
const info = reactive({
  realName: '',
  caseNumber: '',
  age: '',
  sex: ''
});
//定义开设处方，选中的药品表单
const formWrite=reactive({
  drugList:[]
});
//定义处方列表集合
const prescriptionList=ref([/*{
  drugName:'AAA',
  drugFormat:'盒',
  drugPrice:10,
  drugUsage:'温水冲服',
  drugNumber:'1',

}*/]);
//定义对话框状态
const dialogVisible=ref(false);
//定义药品查询条件表单
const formDrug=reactive({
  drugName:'',
  mnemonicCode:''
});
//定义药品列表集合
const drugList=ref([]);
onMounted(()=>{
  getRegisterInfo();
})

/*定义函数加载病人信息*/
function getRegisterInfo() {

  axios.get("http://localhost/his/queryRegiserInfo/" + id)
      .then((response) => {
        info.realName = response.data.realName;
        info.caseNumber = response.data.caseNumber;
        info.age = response.data.age;
        info.sex = response.data.gender;
        //删除sessionStorage对象中保存的键值对

      })
      .catch((error) => {
        console.log(error);
      });
}

/*定义函数打开选择药品对话框*/
function chooseDrug(){
  dialogVisible.value=true;
}
/*发生ajax请求，加载药品列表*/
function searchDrug(){
  axios.get("http://localhost/his/queryDrugInfoList?drugName="
      +formDrug.drugName+"&mnemonicCode="+formDrug.mnemonicCode)
      .then((response) => {
        drugList.value=response.data;
        //删除sessionStorage对象中保存的键值对

      })
      .catch((error) => {
        console.log(error);
      });
}
/*处理复选框，选中事件的函数，参数为选中的行对象(json)集合*/
const tempDrugList=ref([]);

function handleSelectionChange(arr){
  //console.log(arr);
  tempDrugList.value=arr;

}
/*定义函数将药品添加到处方列表*/
function addDrug(){
  tempDrugList.value.forEach((item)=>{
    //给tempDrugList集合中的元素json对象，动态扩展属性
    item.drugNumber=1;
    item.drugUsage='';

  });
  prescriptionList.value=tempDrugList.value;
  dialogVisible.value=false;
}
function closeDrug(){
  dialogVisible.value=false;
}

/*当处方列表中的药品信息被选中的时候的回调函数*/
//定义药品总价
const total=ref(0);
//保存处方列表选中状态发生变化时候的列表信息,被选中的处方列表
const preChangeList=ref([]);
function handlePrescriptionChange(arr){
  preChangeList.value=arr;
  total.value=0;
  arr.forEach((item)=>{
    total.value=total.value+(item.drugPrice*item.drugNumber);
  });
}
//定义函数修改药品数量
function add(row){
  row.drugNumber++;
  //total.value=total.value+row.drugPrice*row.drugNumber;
  total.value=0;
  preChangeList.value.forEach((item)=>{
    total.value=total.value+(item.drugPrice*item.drugNumber);
  });
}
function sub(row){
  row.drugNumber--;
  if(row.drugNumber<=0){
    row.drugNumber=1;

  }
  total.value=0;
  preChangeList.value.forEach((item)=>{
    total.value=total.value+(item.drugPrice*item.drugNumber);
  });
}

/*发送ajax请求保存处方信息*/
function savePrescription(){
  //声明数组保持需要提交数据的json对象
  let arr=[];
  preChangeList.value.forEach((item)=>{
      arr.push({
        drugId:item.id,
        registerId:id,
        drugNumber:item.drugNumber,
        drugUsage:item.drugUsage
      });

  });
  axios.post("http://localhost/his/savePrescription"
      ,arr)
      .then((response) => {
          ElMessage(response.data.msg)

      })
      .catch((error) => {
        console.log(error);
      });
}
</script>

<style scoped>

  span{
    margin-left: 10px;background-color:darkseagreen
  }
</style>